MetaMask Developer: Getting Started

1. The Web3 Foundation and MetaMask’s Role

Welcome to the foundational documentation for building decentralized applications, or **dApps**, using the **MetaMask** browser extension. MetaMask is unequivocally the most ubiquitous and widely accepted interface for users to interact with the **Ethereum** blockchain and its myriad of **Layer 2** solutions and compatible networks. Understanding the core functionality of MetaMask is not merely about integrating a wallet; it's about embracing the **philosophy of Web3**, which champions user-centric control, self-sovereignty, and decentralized identity. As a developer, your primary task is to connect your front-end application to the user's **crypto wallet** securely and intuitively, minimizing friction while maximizing security. MetaMask injects a global JavaScript object, historically named `web3`, but now consolidated under the **EIP-1193** standard via the `window.ethereum` object, into the browser's context. This single object serves as your gateway to sending **RPC (Remote Procedure Call)** requests to the **blockchain** node managed by MetaMask. Without this interface, your dApp remains a traditional Web2 application, unable to facilitate transactions, verify ownership, or sign data.

The move from Web2’s centralized server-client model to Web3’s decentralized blockchain-wallet model is a paradigm shift. In Web2, user authentication relies on databases and passwords; in Web3, authentication is cryptographic, based on the user’s **private keys** and the public address derived from them. MetaMask handles the secure storage and management of these **private keys**, insulating the developer and the dApp from the severe security risks associated with handling highly sensitive cryptographic material. The user retains full control (it is a **non-custodial wallet**), and the dApp merely requests permission to perform actions like viewing balances or initiating transactions. This separation of concerns is the essence of **decentralized identity**. The success of your dApp will hinge on how effectively you handle the user experience around connecting, requesting permissions, and managing the inevitable complexities of **blockchain network** latency and gas fees. The user is king, and MetaMask is their crown jewel of digital **sovereignty**. We will explore the technical implementation of this user interaction model in meticulous detail, ensuring you can build robust and reliable **Ethereum dApps**.

1.1 Developer Prerequisites and Environment Setup

Before writing your first line of Web3-specific code, you need a standard development environment. This typically includes **Node.js**, **npm** or **yarn**, and a modern code editor. However, for a blockchain dApp, two additional, crucial components are mandatory: **MetaMask** installed in your **Chrome** or **Brave** browser, and a **blockchain interaction library**. While you can interact directly with the `window.ethereum` object using raw **JSON-RPC** calls, it is highly discouraged for production-grade applications due to complexity, lack of type safety, and error proneness.

Choosing a Web3 Library: Ethers.js vs. Web3.js

The modern standard for **Ethereum** development, particularly in the JavaScript ecosystem, is **Ethers.js**. It offers a clean, well-documented, and robust interface for interacting with the blockchain. **Web3.js**, while historically significant, is often considered more verbose and less developer-friendly. Ethers.js simplifies core operations like **ABI** encoding, transaction signing, and event handling.

// Using npm to install the latest version of Ethers.js
npm install ethers
                

When using a library like Ethers.js, you essentially wrap the raw **MetaMask** provider (`window.ethereum`) to gain access to higher-level, asynchronous methods. This abstraction layer is vital for maintaining clean, readable, and maintainable code, making the handling of **transaction confirmations** and **gas estimation** significantly easier. Your application should always perform a **MetaMask check** to ensure the `window.ethereum` object exists before attempting any Web3 functionality, providing a graceful fallback for users who haven't installed the extension. This **graceful fallback** can include prompting the user with a direct link to the **MetaMask download** page, a necessary step in the Web3 onboarding funnel. The initial check is the first line of defense against runtime errors in a partially-decentralized environment.

1.2 Connecting to Testnets and Faucets

Never test your dApp's core functionality—especially transactions and contract writes—on the **Ethereum Mainnet** using real funds. The costs and risks are prohibitive. Instead, you must use **Testnets** like **Sepolia** or **Holesky**. These networks mirror the functionality of the Mainnet but use valueless test **ETH**. MetaMask provides built-in support for these networks, allowing users to easily switch contexts. As a developer, you need to ensure your application can correctly detect and prompt the user to switch to the required **Chain ID** of the chosen Testnet.

Acquiring Test ETH via Faucets

To pay the **gas fees** required on a Testnet, you need Test **ETH**, which you acquire from a **faucet**. Faucets are web services that distribute small amounts of Test ETH to user addresses for free. This process is crucial for developers to perform extensive **unit testing** and **integration testing** of their smart contracts and front-end logic. The ability to deploy, interact, and debug complex contracts on a financially risk-free network is paramount for developing robust **blockchain applications**. Developers often need automated processes to acquire Test **ETH** for continuous integration pipelines, highlighting the importance of reliable **faucet services** that can handle programmatic requests. The entire testing lifecycle of a dApp is dependent on the availability and stability of these Testnets and their associated **faucets**. This reliance emphasizes the symbiotic relationship between core network infrastructure and the developer tools provided by wallets like **MetaMask**.

2. The window.ethereum API Reference (EIP-1193)

The **window.ethereum** object is the standard interface injected by **MetaMask** (and most other modern wallets) into the browser. It adheres to **EIP-1193** (Ethereum Provider JavaScript API) and acts as an EventEmitter, meaning it can both send and receive events. Mastering this object is key to synchronizing your **dApp** state with the user's **MetaMask wallet** state.

2.1 Core Methods: request()

The central mechanism for communication is the `request()` method. This method takes a single object argument with two required fields: `method` (a string representing the **JSON-RPC** method to call, e.g., `eth_requestAccounts`) and `params` (an optional array of parameters for the method). It returns a JavaScript **Promise** that resolves with the result of the **RPC** call or rejects with an error. This asynchronous nature is critical for preventing the blocking of the main thread while waiting for network confirmation or user interaction.

// Example using raw window.ethereum.request()
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
console.log('Current Chain ID:', chainId);
                

The uniformity provided by **EIP-1193** means that the same request structure works across different compatible wallets, ensuring that your application remains wallet-agnostic, a desirable feature in the **Web3** ecosystem. This standardization is a massive improvement over older, proprietary API implementations. The `request()` method handles all the necessary serialization and deserialization of the **JSON-RPC** payload, shielding the developer from low-level network protocol details. The error handling mechanism is also standardized; network errors, user rejections, and invalid parameters all throw specific error codes defined by **EIP-1474**, allowing for granular and robust error reporting in the dApp's user interface.

2.2 Provider Events: State Change Listeners

As an **EventEmitter**, `window.ethereum` allows your dApp to react instantly to changes in the user's **MetaMask** state without constant polling. This is essential for a fluid and reliable user experience. The key events you must listen to are:

`accountsChanged` Event

Fired when the user switches accounts within the **MetaMask** interface or disconnects. The listener receives an array of currently selected addresses. This event is vital for updating the dApp's UI to reflect the newly selected user identity. If the array is empty, it means the user has disconnected all accounts, and your dApp must revert to a disconnected state, prompting the user to reconnect. The proper handling of this event is a cornerstone of maintaining a persistent and accurate user session in a **non-custodial** environment. Failure to listen to `accountsChanged` leads to stale data and a broken user experience.

`chainChanged` Event

Fired when the user switches the active **blockchain network** (e.g., from Mainnet to Sepolia). The listener receives the new **Chain ID** (in hexadecimal format). Upon receiving this event, your dApp must re-initialize its entire provider object and, if necessary, prompt the user if the new chain is not supported by your application. This synchronization is critical for ensuring all subsequent **RPC** calls are directed to the correct **network endpoint**. A dApp must explicitly support the new network or instruct the user to switch back to a supported one.

`connect` and `disconnect` Events

The `connect` event fires when **MetaMask** is first able to submit **RPC** requests to a **chain** (usually on page load after the user has previously connected). The `disconnect` event fires when the connection to **MetaMask's** node is lost, often due to network issues or if the user locks their wallet. The `disconnect` event should trigger a full session tear-down and prompt for reconnection, often presenting the user with an error message and a retry button. The robust management of these connection events ensures application resilience against transient network failures.

window.ethereum.on('accountsChanged', (accounts) => {
    if (accounts.length === 0) {
        console.log('User disconnected wallet.');
        // Logic to update UI to logged-out state
    } else {
        console.log('New account selected:', accounts[0]);
        // Logic to refresh data for new account
    }
});

window.ethereum.on('chainChanged', (chainId) => {
    console.log('Chain changed to:', chainId);
    // Logic to re-initialize provider or prompt for network switch
    window.location.reload(); // Recommended to fully reset the application state
});
                

**Immediate Page Reload:** It is a common and often recommended practice within the **Web3** development community to perform a full page reload (`window.location.reload()`) upon receiving a `chainChanged` event. This drastic action is often necessary because modern application frameworks (like React, Angular, Vue) maintain a complex internal state, and changing the underlying **MetaMask provider** context without a full refresh can lead to subtle, hard-to-debug state inconsistencies. While not ideal for user experience, it guarantees that the application's entire context is rebuilt with the correct **Chain ID** and **network parameters**. This method is a pragmatic compromise between absolute reliability and user interface smoothness. The developer must weigh the stability gains against the momentary disruption to the user flow.

3. Connection and Account Management

The process of connecting a user's **MetaMask wallet** to your **dApp** is the absolute first step in the user journey. It must be initiated by an explicit user action, typically clicking a "Connect Wallet" button. This action triggers the most important **JSON-RPC** method: `eth_requestAccounts`.

3.1 The eth_requestAccounts Method

Calling `eth_requestAccounts` prompts the **MetaMask extension** to open a window asking the user which accounts they wish to connect to your dApp. This is the **initial permission grant**. If the user approves, the method resolves with an array of their currently selected public addresses (e.g., `['0x123...abc']`). If the user rejects the request, the **Promise** is rejected with an error, which must be gracefully handled by your dApp. **Crucially, this method should only be called in response to a user action (e.g., button click).** Calling it preemptively on page load is considered poor practice and can lead to a frustrating user experience, often resulting in browser-level pop-up blockers being triggered.

async function connectWallet() {
    if (typeof window.ethereum !== 'undefined') {
        try {
            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
            const userAddress = accounts[0];
            console.log("Connected account:", userAddress);
            // Update UI to show connected state
        } catch (error) {
            if (error.code === 4001) {
                // User rejected the connection request
                console.log('Connection request rejected by user.');
            } else {
                console.error('An unexpected connection error occurred:', error);
            }
        }
    } else {
        alert("MetaMask is not installed. Please install it to use this dApp.");
        // Provide link to MetaMask download page
    }
}
                

The error code **4001** is specifically defined in the **EIP-1193** standard as a "User Rejected Request," making it easy to provide targeted feedback to the user—for example, a message like "Connection Failed: Please approve the request in the MetaMask pop-up." The **MetaMask** process is designed to be permissioned, meaning the user is in control of when and how their identity is exposed to a dApp. Developers must respect this model of explicit consent.

3.2 Retrieving Current Accounts: eth_accounts

Once a user has successfully connected, you often need to check if they are still connected on subsequent page loads or tab switches. For this, you use the `eth_accounts` method. **Unlike** `eth_requestAccounts`, this method **does not** trigger a pop-up and **does not** request new permissions. It simply returns the accounts your dApp *already* has access to. If the user is connected, it returns an array of accounts; otherwise, it returns an empty array.

async function checkConnectionStatus() {
    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
    if (accounts.length > 0) {
        console.log("Already connected to:", accounts[0]);
        return accounts[0];
    } else {
        console.log("User has not yet connected or has disconnected.");
        return null;
    }
}
                

The standard **dApp** connection flow should be: 1. Check for `window.ethereum`. 2. If present, call `eth_accounts` on page load to check for an existing session. 3. If `eth_accounts` is empty, display the "Connect Wallet" button, which then triggers the intrusive `eth_requestAccounts` only upon user click. This ensures a seamless, non-intrusive re-connection for returning users while respecting the initial security protocols.

3.3 Programmatically Managing Chains and Networks

A robust **dApp** must ensure the user is connected to the correct **blockchain network**. If your application only supports **Polygon**, you must ensure the user is on the **Polygon Mainnet Chain ID** (`0x89` in hex) and not the **Ethereum Mainnet** (`0x1`).

Switching Chains: wallet_switchEthereumChain

You can programmatically prompt the user to switch networks using the `wallet_switchEthereumChain` method. This method takes the desired `chainId` as a parameter and triggers a **MetaMask** pop-up confirmation.

async function switchNetwork(targetChainIdHex) {
    try {
        await window.ethereum.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: targetChainIdHex }], // e.g., '0x89' for Polygon
        });
        console.log("Successfully switched to target chain.");
    } catch (switchError) {
        // This error code indicates that the chain has not been added to MetaMask.
        if (switchError.code === 4902) {
            console.log("Target chain not found. Requesting to add it...");
            // Fallback: Request the user to add the network
            await addCustomNetwork(targetChainIdHex);
        } else {
            console.error("Failed to switch network:", switchError);
            // Handle user rejection or other errors
        }
    }
}
                

Adding New Chains: wallet_addEthereumChain

If the user does not have the required network configured in their **MetaMask**, the switch request will return error code **4902**. In this scenario, your application must provide a fallback to add the network using `wallet_addEthereumChain`. This requires providing comprehensive **network configuration data** including the **Chain ID**, **RPC URLs**, **Explorer URLs**, and the native currency symbol. This capability is essential for dApps operating on newer **Layer 2** solutions or custom **sidechains**. The developer essentially provides the entire configuration payload to the **MetaMask extension**, which then presents the details to the user for final approval, maintaining the non-custodial and permissioned nature of the wallet interaction.

async function addCustomNetwork(chainId) {
    await window.ethereum.request({
        method: 'wallet_addEthereumChain',
        params: [{
            chainId: chainId,
            chainName: 'Polygon Mainnet',
            rpcUrls: ['https://polygon-rpc.com'],
            nativeCurrency: {
                name: 'MATIC',
                symbol: 'MATIC',
                decimals: 18,
            },
            blockExplorerUrls: ['https://polygonscan.com/'],
        }],
    });
}
                

This detailed flow for network management is a hallmark of modern, multi-chain **dApp** development. It moves beyond the limitations of the single-chain **Ethereum** model and provides a professional, guided experience for users interacting with the broader **Web3** landscape. The ability to abstract away complex **network configuration** behind a single user-approved pop-up is a powerful feature of the **MetaMask API**.

4. Sending Transactions and Gas Management

The ability to send a transaction is the most critical function of a **dApp**. Every action that changes the state of the **blockchain** (sending **ETH**, transferring **tokens**, calling a **smart contract** function that modifies data) requires a transaction signed by the user's **MetaMask wallet** and submitted to the network.

4.1 Sending Basic ETH Transfers: eth_sendTransaction

The core method for any transaction is `eth_sendTransaction`. When used for a simple **ETH** transfer, the parameters are straightforward: `from` (the user's current address), `to` (the recipient's address), and `value` (the amount of **ETH** to send, represented in **Wei** and in hexadecimal format).

async function sendEthTransaction(recipientAddress, ethAmount) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();

    // Convert ETH amount to Wei (BigInt)
    const weiAmount = ethers.parseEther(ethAmount.toString());

    const tx = await signer.sendTransaction({
        to: recipientAddress,
        value: weiAmount,
    });

    console.log('Transaction hash:', tx.hash);
    // Wait for the transaction to be mined
    await tx.wait();
    console.log('Transaction confirmed successfully.');
}
                

When this code executes, **MetaMask** intercepts the request from **Ethers.js**, calculates the estimated **gas fee**, and presents a confirmation screen to the user. The user reviews the details (amount, recipient, gas cost) and either approves or rejects the transaction. If approved, **MetaMask** cryptographically signs the transaction using the user’s **private keys** (which never leave the wallet extension) and transmits the signed transaction to the **Ethereum network**. The method resolves with the transaction hash (`tx.hash`), which can then be used to track the transaction's confirmation status on a **block explorer**.

4.2 Gas, Gas Limits, and EIP-1559

**Gas** is the unit of computational effort required to execute operations on the **Ethereum Virtual Machine (EVM)**. Every transaction must include a **gas limit** (the maximum amount of gas the user is willing to spend) and a **gas price**. The introduction of **EIP-1559** fundamentally changed how gas fees are calculated, moving away from a simple "first-price auction" model.

EIP-1559 Components

Under **EIP-1559**, the total transaction fee is split into three components:

1. **Base Fee:** Dynamically determined by network demand, this portion is **burned** (removed from circulation) and is required to be included for the transaction to be mined.
2. **Priority Fee (or Tip):** An optional amount paid directly to the miner/validator to incentivize them to include the transaction quickly.
3. **Gas Limit:** The maximum computation units allowed. If the transaction runs out of gas (i.e., hits the limit) before completing, it fails, but the consumed gas is still paid.

// Example of a transaction with custom EIP-1559 gas settings
const tx = await signer.sendTransaction({
    to: recipientAddress,
    value: weiAmount,
    gasLimit: 30000, // Custom gas limit
    maxPriorityFeePerGas: ethers.parseUnits("5", "gwei"), // 5 Gwei tip
    maxFeePerGas: ethers.parseUnits("100", "gwei"), // Max total fee 
});
                

Handling a stuck transaction is a common troubleshooting scenario in **dApp** development. If a transaction has been broadcast but remains pending because the gas price is too low, the user can use **MetaMask's** built-in features to "Speed Up" (resubmit with a higher fee) or "Cancel" (resubmit with a zero-value transaction and a higher fee to overwrite the pending transaction). Developers must educate their users on these **MetaMask** features, as direct programmatic cancellation is complex and often unnecessary given the wallet's UI support.

5. Smart Contract Interaction

The true utility of **MetaMask** and the **Ethereum** network lies in interacting with **Smart Contracts**. This involves using the contract's **ABI (Application Binary Interface)**—a JSON array describing the contract's functions, events, and variables—to correctly format the data sent to the contract address.

5.1 Reading Data: View/Pure Functions (eth_call)

Reading data from a contract (calling a **View** or **Pure** function) does **not** modify the blockchain state and therefore does **not** require a transaction or gas fee. This interaction is handled by `eth_call` and is almost always performed directly through an **Ethers.js Provider** or **Web3.js Provider**, bypassing the need for **MetaMask** pop-ups entirely. This makes data retrieval fast and free.

// Example using Ethers.js to read a token balance
async function getTokenBalance(tokenAddress, walletAddress) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    // Standard ERC-20 ABI subset for 'balanceOf'
    const abi = ["function balanceOf(address owner) view returns (uint256)"];
    
    // Create a Contract instance connected to the Provider
    const tokenContract = new ethers.Contract(tokenAddress, abi, provider);

    // Call the View function
    const balanceWei = await tokenContract.balanceOf(walletAddress);
    
    // Assuming 18 decimals, convert from Wei to standard unit
    const balance = ethers.formatUnits(balanceWei, 18); 
    console.log("Token Balance:", balance);
    return balance;
}
                

The contract object provided by **Ethers.js** abstracts away the complexity of **ABI encoding** (converting JavaScript types like strings and numbers into the required hexadecimal bytecode) and handles the submission of the `eth_call` request to the configured **RPC endpoint**. The developer only needs to worry about passing the correct JavaScript arguments and handling the returned, decoded values.

5.2 Writing Data: State-Changing Functions (eth_sendTransaction)

Calling a contract function that modifies state (e.g., `transfer`, `swap`, `mint`) requires a signed transaction and gas. This process must involve the user’s **MetaMask signer** to obtain the necessary cryptographic signature.

// Example using Ethers.js to write to a contract (transfer tokens)
async function transferToken(tokenAddress, recipientAddress, amount) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();
    
    const abi = ["function transfer(address recipient, uint256 amount) returns (bool)"];
    
    // Convert human readable amount to contract-required Wei
    const amountWei = ethers.parseUnits(amount.toString(), 18); 

    // Contract instance connected to the Signer (MetaMask)
    const tokenContract = new ethers.Contract(tokenAddress, abi, signer);

    try {
        // This triggers the MetaMask pop-up for signing
        const tx = await tokenContract.transfer(recipientAddress, amountWei);
        console.log('Token Transfer Hash:', tx.hash);
        
        // Wait for confirmation
        const receipt = await tx.wait();
        console.log('Transfer confirmed in block:', receipt.blockNumber);
        return receipt;
    } catch (error) {
        console.error("Token transfer failed:", error);
        // Handle user rejection, insufficient funds, or contract execution errors
    }
}
                

In this example, calling `tokenContract.transfer(...)` does two things:

1. **Encoding:** **Ethers.js** encodes the function call and its parameters into the raw hexadecimal data required for the `data` field of the **Ethereum transaction**.
2. **Signing:** The library sends an `eth_sendTransaction` request to **MetaMask**, which includes the `to` (contract address), `value` (0, as tokens are being transferred), and the encoded `data`. **MetaMask** then asks the user to approve the signing.

6. Advanced Topics and Message Signing

Beyond simple transactions, **MetaMask** offers several powerful methods for proving identity, facilitating off-chain communication, and managing complex interactions required by advanced **dApps**.

6.1 Signing Arbitrary Data: eth_sign and personal_sign

The act of signing data, unlike signing a transaction, does not cost gas and does not interact with a smart contract. It simply proves that the user controls the given public address. This is often used for off-chain authentication, such as logging into a server-side dApp component without exposing passwords (known as **Sign-in with Ethereum (SIWE)**).

`personal_sign` (EIP-191)

This is the most common method for signing a simple string message. **MetaMask** prefixes the message with `\x19Ethereum Signed Message:\n` and the length of the message before hashing and signing it. This prefix is a security feature that prevents malicious dApps from tricking users into signing a transaction hash instead of a message.

async function signMessage(message) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();
    
    // Ethers.js handles the personal_sign prefixing automatically
    const signature = await signer.signMessage(message);
    
    console.log("Signed Message Signature:", signature);
    return signature;
}
                

On the server-side, this signature can be cryptographically verified to determine which **Ethereum** address produced it, effectively verifying the user's identity without a traditional password. This forms the backbone of decentralized authentication mechanisms and is a fundamental component of **Web3** infrastructure.

6.2 Structured Data Signing: EIP-712

When signing complex data (e.g., an off-chain order book trade, a governance vote proposal), using a raw string message can be confusing and dangerous for the user. **EIP-712** introduced a standard for displaying **structured, human-readable data** to the user during the signing process. **MetaMask** utilizes this standard to present a detailed JSON-like summary of the data being signed, significantly reducing the risk of phishing.

The developer provides a structured data object defining the message's domain (chain ID, verifying contract), the types of the data, and the actual message contents. **Ethers.js** or **Web3.js** then sends this payload via the `eth_signTypedData_v4` method. This method is crucial for large-scale DeFi and NFT platforms where users need to sign non-transactional but financially critical payloads. The enhanced transparency provided by **EIP-712** is a massive security upgrade for end-users, giving them a clear, readable view of the commitment they are making with their **MetaMask wallet**.

6.3 Managing Wallet Events for Data Synchronization

Effective **dApp** development requires not just initiating actions but also synchronizing the user interface with the eventual results. This is often achieved through listening to **Smart Contract Events**.

Listening to Contract Events (Logs)

Every state-changing function call can emit an **Event** (a log entry on the blockchain). These events are lightweight, inexpensive ways to signal that an action has occurred. **Ethers.js** allows you to easily filter and listen for specific events from a contract.

function listenForTokenTransfer(tokenAddress) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    const abi = ["event Transfer(address indexed from, address indexed to, uint256 value)"];
    const tokenContract = new ethers.Contract(tokenAddress, abi, provider);

    // Listen for the Transfer event
    tokenContract.on("Transfer", (from, to, value, event) => {
        console.log(`Transfer detected: ${ethers.formatUnits(value, 18)} from ${from} to ${to}`);
        // Logic to refresh token balances for both the sender and recipient
    });

    // Clean up the listener when the component unmounts
    // return () => tokenContract.removeAllListeners("Transfer");
}
                

Listening to events provides real-time updates without the need to constantly poll the **blockchain** for state changes, dramatically improving the responsiveness and efficiency of your dApp. It is the preferred method for monitoring the success of a transaction once the hash has been returned by **MetaMask**. The combination of event listeners and the `tx.wait()` function call creates a robust, two-tiered system for transaction confirmation and UI update.

7. Security Best Practices for dApp Developers

The security of a **dApp** is intrinsically tied to the security of the user's **MetaMask wallet**. As a developer, you have a responsibility to architect your application in a way that protects your users from common attack vectors. **Never assume the user is protected by MetaMask alone.**

7.1 Front-End Security: Approvals and Phishing

The most common source of asset loss in **Web3** is the **malicious approval**—when a user grants a malicious or compromised smart contract the right to spend their **ERC-20** tokens indefinitely.

Minimize Token Approvals

When using an **ERC-20** token on a DeFi protocol, the user must first approve the protocol's contract to spend their tokens via the `approve(address spender, uint256 amount)` function. Many protocols, for convenience, request an **"infinite approval"** (approving the maximum possible `uint256` value). As a developer, you should:

1. **Never default to infinite approval.** Always prompt the user for the exact amount needed for the current transaction.
2. **Educate the user** in the UI about what an approval is and how it differs from a token transfer.
3. Provide an easy-to-use utility within your dApp for the user to revoke or reduce existing approvals (using external tools like **revoke.cash** is often necessary).

Sanitize All External Input

Any data sourced from external APIs, URL parameters, or user input must be meticulously validated and sanitized before being used in a **smart contract** function call. For instance, always check if an address is a valid **Ethereum** address format, and ensure that numeric values adhere to expected limits to prevent integer overflow/underflow or manipulation of transaction amounts. While **Ethers.js** provides strong type checking, the ultimate responsibility for data integrity rests with the dApp's front-end logic.

7.2 Server-Side and Contract Security

If your dApp includes a backend component that authenticates users via **SIWE (Sign-in with Ethereum)**, the server must robustly verify the signature.

Signature Verification

The server-side component must use a cryptographic library to:

1. Re-create the exact message that the user signed.
2. Use the provided signature and the original message to recover the signer's public address.
3. Compare the recovered address with the address the user claims to be.